<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直滚动条</title>
    <!-- 这个地方引入的图标库 -->
    <!-- 图标库地址 -->
    <!-- https://fontawesome.com/v5/search?s=solid%2Cbrands -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider-container">
        <div class="left-slide">
            <div style="background-color:#FD3555;">
                <h1>Nature flower</h1>
                <p>all in pink</p>
            </div>
            <div style="background-color:#2A86BA;">
                <h1>Bluuue Sky</h1>
                <p>with it's mountains</p>
            </div>
            <div style="background-color:#252E33 ;">
                <h1>Lonely castle</h1>
                <p>in the wilderness</p>
            </div>
            <div style="background-color:#FFB866 ;">
                <h1>Flying eagle</h1>
                <p>in the sunset</p>
            </div>
        </div>
        <div class="right-slide">
            <!-- 这里面写的是图片的地址 -->
            <!-- 你们可以用本地图片的绝对路径 也可以用我这个源码的图片地址 -->
            <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
            <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
            <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
            <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div>
           </div>
        <div class="action-buttons">
            <button class="down-button">
                <i class="fas fa-arrow-down"></i>
            </button>
            <button class="up-button">
                <i class="fas fa-arrow-up"></i>
            </button>
        </div>
    </div>
    <!-- 引入js文件 -->
    <script src="script.js"></script>
</body>
</html>